<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 1.普通行内样式 样式直接书写在style属性中 -->
        <div style="width:100px;height: 200px;background-color: blueviolet;"></div>

        <div :style="msg"></div>

        <div :style="msg2"></div>
        <!-- 注意：普通函数的style属性可以和 v-bind绑定的style属性一起使用-->
        <div style="width:150px;height:100px"  :style="msg3"></div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app', //
            data: {
                // 2.把样式以对象的形式写在数据中  
                msg: {
                    width: "100px",
                    height: '100px',
                    backgroundColor: 'pink'
                },
                // 3.把样式以数组的形式写在数据中 但是该数组必须是以对象组成的 样式不能直接写在数组中
                msg2: [{
                        width: "200px"
                    },
                    {
                        height: '100px'
                    },
                    {
                        backgroundColor: 'skyblue'
                    }
                ],
                msg3:{
                    backgroundColor:'red'
                }
            }
        })
    </script>
</body>

</html>